Rename ansi and prettylight colors#1352
Conversation
…lights.syntax.* Drop the generic 'color.' prefix from ANSI and prettylights syntax tokens to align with domain-specific naming (bgColor, fgColor, borderColor, display). New CSS vars: --ansi-red, --prettylights-syntax-keyword Old CSS vars kept as deprecated aliases: --color-ansi-red: var(--ansi-red) - Add $description to all 47 individual tokens - Add deprecated aliases with $deprecated field for migration - Update token-authoring.md with naming conventions and deprecation guide Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: f1cfc4a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Design Token Diff (CSS)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (StyleLint)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (Figma)The message is too long to be displayed here. For more details, please check the job summary. |
There was a problem hiding this comment.
Pull request overview
This PR updates functional syntax color token naming by promoting ansi.* and prettylights.syntax.* to first-class (non-color.*) token groups, while retaining the previous color.ansi.* and color.prettylights.syntax.* names as deprecated aliases for backward compatibility.
Changes:
- Renames token paths from
color.ansi.*→ansi.*andcolor.prettylights.syntax.*→prettylights.syntax.*. - Adds deprecated alias tokens that reference the new canonical tokens via
{...}references (and marks them with$deprecated+ “Deprecated. Use … instead.” descriptions). - Updates token authoring documentation with guidance for renames/deprecations and naming conventions.
Show a summary per file
| File | Description |
|---|---|
| src/tokens/functional/color/syntax.json5 | Introduces new canonical ansi.* and prettylights.syntax.* token groups and adds deprecated color.* aliases. |
| contributor-docs/agents/token-authoring.md | Documents conventions for renaming/deprecating tokens and the expected naming patterns. |
Copilot's findings
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comments suppressed due to low confidence (2)
src/tokens/functional/color/syntax.json5:396
prettylights.syntax.entity-tagchanges thedarkoverride from{base.color.neutral.8}to{base.color.green.1}and adds additional color-vision overrides. This is a functional palette change beyond the rename/deprecation work; please confirm it's intentional (and document it) or keep the previous override values to avoid unexpected visual diffs.
dark: '{base.color.green.1}',
'dark-tritanopia': '{base.color.blue.1}',
'dark-tritanopia-high-contrast': '{base.color.blue.1}',
'dark-protanopia-deuteranopia': '{base.color.blue.1}',
'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.1}',
src/tokens/functional/color/syntax.json5:562
prettylights.syntax['string-regexp']modifies several overrides (e.g.darkfrom{base.color.green.3}to{base.color.green.1}, and the tritanopia/protanopia mappings from*.3to*.1). If this PR’s scope is limited to renames + deprecated aliases, consider reverting these value changes (or explicitly documenting them) to avoid unexpected syntax highlighting changes across themes.
dark: '{base.color.green.1}',
'dark-tritanopia': '{base.color.blue.1}',
'dark-tritanopia-high-contrast': '{base.color.blue.1}',
'light-tritanopia': '{base.color.blue.6}',
'light-tritanopia-high-contrast': '{base.color.blue.6}',
'dark-protanopia-deuteranopia': '{base.color.blue.1}',
'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.1}',
- Files reviewed: 2/2 changed files
- Comments generated: 1
| 'org.primer.overrides': { | ||
| dark: '{base.color.neutral.6}', | ||
| dark: '{base.color.neutral.9}', | ||
| }, |
There was a problem hiding this comment.
No, there should be no token value changes, just the names schange. Fix this
There was a problem hiding this comment.
@copilot No, there should be no token value changes, just the names schange. Fix this
There was a problem hiding this comment.
Fixed in f1cfc4a. The root cause was that prettylights.syntax.entityTag was accidentally created using prettylights.syntax.entity's purple values ({base.color.purple.6}, dark {base.color.purple.2}) instead of the original entity-tag values ({base.color.blue.6}, dark {base.color.green.1} + tritanopia overrides). Additionally, prettylights.syntax.entity was incorrectly turned into a deprecated alias pointing to entityTag, losing its canonical purple values.
The fix:
prettylights.syntax.entityTagnow correctly uses the originalentity-tagvalues (blue + green dark + tritanopia)prettylights.syntax.entityis restored as a proper canonical token with the originalentitypurple values
All other canonical camelCase tokens (constantOtherReferenceLink, storageModifierImport, etc.) were verified to have correct values matching the originals.
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
lukasoppermann
changed the title
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Migrate prettylights syntax tokens to new naming while maintaining legacy support.
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
lukasoppermann
added
update snapshots
github-actions
Bot
removed
the
update snapshots
Summary
Drop the generic
color.prefix from ANSI and prettylights syntax tokens to align with the domain-specific naming convention used elsewhere (bgColor,fgColor,borderColor,display). All token values are preserved exactly — only names change.List of notable changes:
color.ansi.*→ansi.*(e.g.--color-ansi-red→--ansi-red)color.prettylights.syntax.*→prettylights.syntax.*(e.g.--color-prettylights-syntax-keyword→--prettylights-syntax-keyword)entity-tag→entityTag,storage.modifier.import→storageModifierImport)color.ansi.*andcolor.prettylights.syntax.*tokens as backward-compatible aliases referencing the new canonical namesprettylights.syntax.entityTagwas accidentally assignedentity's purple values instead of the originalentity-tagblue+tritanopia values — corrected to match the original token valuesprettylights.syntax.entitywas incorrectly made a deprecated alias; restored as a canonical token with the original purple values ({base.color.purple.6}, dark{base.color.purple.2})$descriptionto all 47 individual tokens (17 ANSI + 30 prettylights)contributor-docs/agents/token-authoring.mdwith naming conventions table, deprecation/rename guide, and deprecated prefix notesBackward compatibility
Old tokens are kept as deprecated aliases using
var()references:What should reviewers focus on?
prettylights.syntax.entity(purple) andprettylights.syntax.entityTag(blue, HTML/XML tags) have distinct, correct valuesSteps to test:
npm run lint— should pass with no warningsnpm run format— should pass with no changesnpm test— all 9 tests should passnpm run build— verify new CSS vars are emitted with resolved values and old CSS vars are emitted asvar(--new-name)referencesSupporting resources (related issues, external links, etc):
Contributor checklist:
Reviewer checklist: